<template>
  <div class="loginBox" >
    <ul id="myTab" class="nav nav-tabs nav-justified">
      <li class="active loginTab" data-toggle="tab" v-on:click="ToLogin">
        <a href="javascript:void(0)">登录</a>
      </li>
      <li class="registerTab" data-toggle="tab" v-on:click="ToRegister">
        <a href="javascript:void(0)">注册</a>
      </li>
    </ul>
    <p class="tip" v-show="showTishi">{{tishi}}</p>
    <div class="showL loginView" v-show="showLogin" @keyup.enter="login()">
      <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
          <span class="input-group-addon">手机号</span>
          <input type="text" class="form-control" v-model="loginTel" maxlength="11">
          <span class="input-group-addon glyphicon telTip tipCss"></span>
        </div>
        <div class="input-group">
          <span class="input-group-addon passwd">密&nbsp;&nbsp;&nbsp;码</span>
          <input type="text" class="form-control" v-model="loginPasswd" max="24">
          <span class="input-group-addon glyphicon passwdTip tipCss"></span>
        </div>
        <div class="checkbox rem-box">
          <label>
            <input v-model="rem" class="rem" type="checkbox" value="0">记住我
          </label>
        </div>
        <div class="input-group btn-grou">
          <button type="button" class="btn btn-primary login" v-on:click="login">登录</button>
        </div>
      </form>
    </div>
    <div class="showL registerView" v-show="showRegister"  @keyup.enter="register()">
      <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
          <span class="input-group-addon passwd">电&nbsp;&nbsp;&nbsp;话</span>
          <input type="text" class="form-control" v-model="registerTel" maxlength="11">
          <span class="input-group-addon glyphicon glyphicon-asterisk tipCss reTelTip"></span>
        </div>
        <div class="input-group">
          <span class="input-group-addon username">用户名</span>
          <input type="text" class="form-control" v-model="registerName" maxlength="24">
          <span class="input-group-addon glyphicon glyphicon-asterisk tipCss reNameTip"></span>
        </div>
        <div class="input-group">
          <span class="input-group-addon passwd">密&nbsp;&nbsp;&nbsp;码</span>
          <input type="text" class="form-control" v-model="registerPasswd" maxlength="24">
          <span class="input-group-addon glyphicon glyphicon-asterisk tipCss rePasswdTip"></span>
        </div>
        <div class="input-group">
          <span class="input-group-addon passwd">地&nbsp;&nbsp;&nbsp;址</span>
          <input type="text" class="form-control" v-model="registerAddr">
          <span class="input-group-addon glyphicon glyphicon-asterisk n tipCss"></span>
        </div>
        <div class="input-group">
          <span class="input-group-addon passwd">生&nbsp;&nbsp;&nbsp;日</span>
          <input type="date" class="form-control" v-model="registerBirthday" max="maxBirth">
          <span class="input-group-addon glyphicon glyphicon-asterisk n tipCss"></span>
        </div>
        <div class="input-group">
          <span class="input-group-addon passwd">性&nbsp;&nbsp;&nbsp;别</span>
          <label class="radio-inline">
            <input type="radio" v-model="gender" id="man" value="男" checked>
            男
          </label>
          <label class="radio-inline">
            <input type="radio" v-model="gender" id="woman" value="女"> 女
          </label>
        </div>
        <div class="input-group btn-grou">
          <button type="button" class="btn btn-primary register" v-on:click="register">注册</button>
        </div>
      </form>
    </div>
  </div>
</template>

<style>
@import "../../assets/bower_components/bootstrap3.4.1/dist/css/bootstrap.min.css";
@import "../../assets/css/login.css";
</style>

<script>
import { setCookie, getCookie } from "../../assets/js/cookie.js";
import $ from "jquery";
import "../../assets/bower_components/bootstrap3.4.1/dist/js/bootstrap.min.js";
//   import "../../assets/js/login.js"
export default {
  data() {
    return {
      showLogin: true,
      showRegister: false,
      showTishi: false,
      tishi: "",
      loginTel: "",
      loginPasswd: "",
      registerTel: "",
      registerName: "",
      registerPasswd: "",
      registerAddr: "",
      registerBirthday: "1900-01-01",
      maxBirth: "1900-01-01",
      gender: "男",
      rem: ""
    };
  },
  mounted() {
    if (getCookie("flag")) {
      this.$router.push("/home");
    }
    if (getCookie("rem") == "true" || getCookie("rem")) {
      this.loginTel = getCookie("tel");
      this.loginPasswd = getCookie("passwd");
      this.rem = true;
    } 
  },
  methods: {
    initDate: function() {
      var date_now = new Date();
      var year = date_now.getFullYear();
      var month =
        date_now.getMonth() + 1 < 10
          ? "0" + (date_now.getMonth() + 1)
          : date_now.getMonth() + 1;
      var date =
        date_now.getDate() < 10 ? "0" + date_now.getDate() : date_now.getDate();
      var disDate = year + "-" + month + "-" + date;
      //设置input标签的max属性
      this.maxBirth = disDate;
      this.registerBirthday = disDate;
    },
    checkTel: function(tel) {
      var reg = /^1[34578]\d{9}$/;
      if (!reg.test(tel)) {
        return false;
      } else {
        return true;
      }
    },
    checkPasswd: function(passwd) {
      if (passwd.length < 6) {
        return false;
      } else {
        return true;
      }
    },
    checkUsername: function(username) {
      if (
        username == null ||
        username == undefined ||
        username == "" ||
        username.trim().length == 0
      ) {
        return false;
      } else {
        return true;
      }
    },
    ToRegister() {
      this.showRegister = true;
      this.showLogin = false;
      this.initDate();
    },
    ToLogin() {
      this.showRegister = false;
      this.showLogin = true;
    },
    login() {
      var that = this;
      if (that.loginTel == "" || that.loginPasswd == "") {
        alert("请输入手机号或密码");
      } else {
        if (
          that.checkTel(that.loginTel) &&
          that.checkPasswd(that.loginPasswd)
        ) {
          let data = {
            tel: that.loginTel,
            passwd: that.loginPasswd
          };
          /*接口请求*/
          $.ajax({
            url: "http://127.0.0.1:8080/linkMan/linkman/login",
            method: "post",
            data: data,
            dataType: "json",
            success: function(res) {
              if (res.code == 400) {
                that.tishi = res.msg;
                that.showTishi = true;
              } else if (res.code == 200) {
                that.tishi = res.msg;
                that.showTishi = true;
                setCookie("flag", true, 1000 * 60);
                setCookie("username", res.username, 1000 * 60);
                sessionStorage.setItem("sessionId", res.sessionId);
                sessionStorage.setItem("flag", true);
                sessionStorage.setItem("tel", that.loginTel);
                sessionStorage.setItem("username", res.username);
                if (that.rem) {
                  setCookie("rem", true, 1000 * 60);
                  setCookie("tel", that.loginTel, 1000 * 60);
                  setCookie("passwd", that.loginPasswd, 1000 * 60);
                } else {
                  setCookie("rem", false, 7);
                }
                setTimeout(
                  function() {
                    that.$router.push("/home");
                  }.bind(that),
                  1000
                );
              }
            },
            sucess: function(err) {
              console.log("login err: ", err);
            }
          });
        } else if (
          that.checkPasswd(that.loginPasswd) &&
          !that.checkTel(that.loginTel)
        ) {
          that.tishi = "手机号和密码格式不正确";
          that.showTishi = true;
        } else if (!that.checkTel(that.loginTel)) {
          that.tishi = "手机号格式不正确";
          that.showTishi = true;
        } else if (!that.checkPasswd(that.loginPasswd)) {
          that.tishi = "密码格式不正确";
          that.showTishi = true;
        }
      }
    },
    register() {
      let that = this;
      if (
        that.registerUsername == "" ||
        that.registerPassword == "" ||
        that.registerName == ""
      ) {
        alert("请输入用户名或密码、手机号");
      } else {
        if (
          that.checkTel(that.registerTel) &&
          that.checkPasswd(that.registerPasswd) &&
          that.checkUsername(that.registerName)
        ) {
          let data = {
            tel: that.registerTel,
            passwd: that.registerPasswd,
            username: that.registerName,
            birthday: that.registerBirthday,
            gender: that.gender
          };
          console.log("data: ", data);
          $.ajax({
            url: "http://127.0.0.1:8080/linkMan/linkman/register",
            method: "post",
            data: data,
            dataType: "json",
            success: function(res) {
              console.log("register res: ", res);
              if (res.code == 200) {
                that.tishi = "注册成功";
                that.showTishi = true;
                that.username = "";
                that.password = "";
                /*注册成功之后再跳回登录页*/
                setTimeout(
                  function() {
                    that.showRegister = false;
                    that.showLogin = true;
                    that.showTishi = false;
                  }.bind(that),
                  1000
                );
              } else {
                console.log(res.msg);
              }
            },
            error: function(err) {
              console.log("register err: ", err);
            }
          });
        } else if (
          that.checkPasswd(that.registerPasswd) &&
          !that.checkTel(that.registerTel) &&
          !that.checkUsername(that.registerName)
        ) {
          that.tishi = "手机号和密码、用户名格式不正确";
          that.showTishi = true;
        } else if (!that.checkTel(that.registerTel)) {
          that.tishi = "手机号格式不正确";
          that.showTishi = true;
        } else if (!that.checkPasswd(that.registerPasswd)) {
          that.tishi = "密码格式不正确";
          that.showTishi = true;
        } else if (!that.checkName(that.registerName)) {
          that.tishi = "用户名格式不正确";
          that.showTishi = true;
        }
      }
    }
  }
};
</script>
